<template>
  <div>
    <div class="lyrics-main" :style="{ maxHeight: maxH + 'px' }">
      <div
        class="lyrics"
        ref="lyrics"
        v-if="lyricObj.length"
        :style="transform"
      >
        <p
          :class="[isCurLyric(index)]"
          v-for="(item, index) in lyricObj"
          :key="index"
        >
          {{ item.txt }}
        </p>
      </div>
      <div v-else class="lyric-empty">
        <p v-if="lyric">纯音乐，无歌词</p>
        <p v-else>歌词加载中......</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="lyrics">
import Lyric from "lyric-parser"
import { getSongLyric } from '@/api/song'
import {
  reactive,
  toRefs,
  computed,
  getCurrentInstance,
  onMounted,
  watch,
} from 'vue'
const { proxy }: any = getCurrentInstance()
const props = defineProps({
  sId: {
    type: [Number, String],
    default: 0,
  },
  currentTime: {
    type: Number,
    default: 0,
  },
  maxH: {
    type: [Number, String],
    default: 390,
  },
})
const info = reactive({
  lyric: false,
  lyricObj: [] as any,
  curIndex: 0,
  isFull: false,
})
const { lyric, lyricObj, curIndex, isFull } = toRefs(info)

const isCurLyric = computed(() => {
  return (index: any) => {
    return index === info['curIndex'] && props['currentTime'] ? 'active' : ''
  }
})

// 歌词实时滚动
const transform = computed(() => {
  if (info['curIndex'] > 6) {
    return `transform: translateY(-${30 * (info['curIndex'] - 6)}px)`
  } else {
    return 'transform: translateY(0)'
  }
})

const getLyrics = async (id: any) => {
  const res: any = await getSongLyric({ id: id })
  if (res.code !== 200) {
    return proxy.$msg.error('数据请求失败')
  }
  if (!res.lrc.lyric) {
    info['lyric'] = true
    return
  }
  let lyric = new Lyric(res.lrc.lyric)
  info['lyric'] = res.lrc.lyric
  lyric.lines.forEach((item: any) => {
    item.time = item.time / 1000
  })
  // 根据时间轴重排顺序
  info['lyricObj'].sort((a: any, b: any) => {
    return a.time - b.time
  })
  info['lyricObj'] = lyric.lines
}

const findCurIndex = (time: any) => {
  for (let i = 0; i < info['lyricObj'].length; i++) {
    if (time <= info['lyricObj'][i].time) {
      return i
    }
  }
  return info['lyricObj'].length
}

// 页面歌词可以展开查看更多
const fullLyric = () => {
  info['isFull'] = !info['isFull']
}

onMounted(() => {
  getLyrics(props.sId)
})

watch(
  () => props.sId,
  (newVal, oldVal) => {
    info['lyric'] = false
    info['lyricObj'] = []
    info['curIndex'] = 0
    getLyrics(newVal)
  }
)

watch(
  () => props.currentTime,
  (newVal, oldVal) => {
    // 无歌词的时候 不做动画滚动
    if (!info['lyricObj'].length) {
      return
    }
    info['curIndex'] = findCurIndex(newVal) - 1
  }
)
</script>
<style scoped lang="scss">
.lyrics-main {
  height: 100%;
  overflow-y: auto;
  transition: all 1.5s ease-in-out;
}

.lyrics {
  font-size: 0;
  transform: translateY(0);
  transition: transform 1.5s ease-in-out;

  :deep(p) {
    margin: 0;
    line-height: 30px;
    font-size: 14px;
    font-weight: 300;

    &.active {
      color: var(--el-color-primary);
    }
  }
}
.lyric-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100px;
  font-size: 14px;
  color: var(--el-color-primary);

  ~ .more-lyric {
    display: none;
  }
}
.page-lyrics {
  color: #666;
  overflow: hidden;

  .lyric-empty {
    justify-content: left;
  }

  &.fullLyrics {
    max-height: none;
  }
}

.lyric-more span {
  display: inline-block;
  line-height: 30px;
  cursor: pointer;
  color: var(--el-color-primary);
}
</style>
